﻿<template>
  <div class="form-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky
        v-if="isPreview === false"
        :z-index="10"
        :class-name="'sub-navbar draft'"
      >
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div>
        <el-tabs>
          <el-tab-pane label="表头">
            <div class="form-main-container">
              <el-row v-if="false">
                <el-input v-model="temp.id" type="hidden" />
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="100px" label="字典编码:" prop="dictCode" class="form-container-item">
                    <el-input v-model="temp.dictCode" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="100px" label="字典名称:" prop="dictName" class="form-container-item">
                    <el-input v-model="temp.dictName" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="100px" label="序号:" prop="sortNumber" class="form-container-item">
                    <el-input-number v-model="temp.sortNumber" class="custom-width" :min="0" :max="100" label="序号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="100px" label="是否启用:" prop="isEnabled" class="form-container-item">
                    <el-switch v-model="temp.isEnabled" active-color="#13ce66" inactive-color="#dcdfe6" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label-width="100px" label="备注:" prop="remark" class="form-container-item">
                    <el-input v-model="temp.remark" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="明细">
            <div>
              <sys-dictionary-data :isPreview="isPreview" :details="temp.sysDictionaryDatas" :loading="loading" @addDetail="addDetail" @updateDetail="updateDetail" @deleteDetail="deleteDetail" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update } from '@/api/sysDictionary'
import SysDictionaryData from '@/views/systemManagement/sysDictionary/sysDictionaryData/list'

export default {
  name: 'SysDictionaryDetail',
  components: { Sticky, SysDictionaryData },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: '',
        tenantId: '',
        dictCode: '',
        dictName: '',
        sortNumber: 0,
        isEnabled: true,
        remark: '',
        extraProperties: '',
        concurrencyStamp: '',
        creationTime: '',
        creatorId: '',
        lastModificationTime: '',
        lastModifierId: '',
        isDeleted: true,
        deleterId: '',
        deletionTime: '',
        sysDictionaryDatas: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        dictCode: [{ required: true, message: '字典编码必须填写', trigger: 'blur' }],
        sortNumber: [{ required: true, message: '序号必须填写', trigger: 'blur' }],
        isEnabled: [{ required: true, message: '是否启用必须填写', trigger: 'blur' }]
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {}
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        tenantId: '',
        dictCode: '',
        dictName: '',
        sortNumber: 0,
        isEnabled: true,
        remark: '',
        extraProperties: '',
        concurrencyStamp: '',
        creationTime: '',
        creatorId: '',
        lastModificationTime: '',
        lastModifierId: '',
        isDeleted: true,
        deleterId: '',
        deletionTime: '',
        sysDictionaryDatas: []
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.tenantId = response.data.tenantId
        this.temp.dictCode = response.data.dictCode
        this.temp.dictName = response.data.dictName
        this.temp.sortNumber = response.data.sortNumber
        this.temp.isEnabled = response.data.isEnabled
        this.temp.remark = response.data.remark
        this.temp.extraProperties = response.data.extraProperties
        this.temp.concurrencyStamp = response.data.concurrencyStamp
        this.temp.creationTime = response.data.creationTime
        this.temp.creatorId = response.data.creatorId
        this.temp.lastModificationTime = response.data.lastModificationTime
        this.temp.lastModifierId = response.data.lastModifierId
        this.temp.isDeleted = response.data.isDeleted
        this.temp.deleterId = response.data.deleterId
        this.temp.deletionTime = response.data.deletionTime
        this.temp.concurrencyStamp = response.data.concurrencyStamp
        this.temp.sysDictionaryDatas = response.data.sysDictionaryDatas
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    addDetail(data) {
      this.temp.sysDictionaryDatas.push(data)
    },
    updateDetail(data) {
      const index = this.temp.sysDictionaryDatas.findIndex(f => f.id === data.id)
      console.log(data, index)
      if (index !== -1) {
        this.temp.sysDictionaryDatas.splice(index, 1, data)
      }
    },
    deleteDetail(id) {
      const index = this.temp.sysDictionaryDatas.findIndex(f => f.id === id)
      if (index !== -1) {
        this.temp.sysDictionaryDatas.splice(index, 1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.custom-width {
  width: 100%;
}
/deep/ .el-tabs__item {
  width: 100px;
  text-align: center;
}
.form-container {
  position: relative;

  .form-main-container {
    padding: 40px 45px 20px 50px;

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
